<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>闭包陷阱</title>
</head>

<body>
    <button id="btn">Add</button>
    <script>
        /*
                                        闭包特点
                                        1.外部具有指向内部的引用
                                        2.在'外'部作用域访问'内'部作用域的数据


                                        关于闭包
                                        1.闭包是一种强大的语法
                                        2.闭包使用不当很容易内存泄漏
                                        3.不要为了闭包而闭包

                                        */

        // 闭包事例
        // function foo() {
        //     let name = 'lg'

        //     function fn() {
        //         console.log(name);
        //     }
        //     return fn
        // }

        // var a = foo()
        // a()

        // 闭包泄漏
        function foo() {
            let el = document.getElementById('btn')
            el.onclick = function() {
                console.log(el.id);
            }
        }

        foo()

        // 改进方案
        function foo() {
            let el = document.getElementById('btn')
            el.onclick = function() {
                console.log(el.id);
            }
            el = null
        }
        foo()

        // el变量置空，GC清除内存，防止foo（）外部调用，引用内部变量
    </script>
</body>

</html>